<template>
  <div>
    <el-dialog
      :title="'编辑博客:' + post_id"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      :fullscreen="true"
      width="100%"
      @close="close"
    >
      <div v-loading="pageLoading" class="top clearfix" style="margin-top: 5px;">
        <div style="display: inline-block; width: 100%;">
          <el-row>
            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
              <span style="padding: 7px 15px;margin-right: 50px" @click="changeShow">编辑文章
                <el-icon v-if="show_configs" title="点击折叠配置选项" class="el-icon-arrow-up" />
                <el-icon v-else title="点击打开配置选项" class="el-icon-arrow-down" />
                <el-button size="mini" @click="handleOpenEditor">打开</el-button>
              </span>
              <span v-if="post_id" style="float: right;padding: 7px 15px;" class="mt-detail" @click="handleViewHistory">
                <svg-icon icon-class="post_history" style="margin-right:5px;" />文章历史</span>
              <el-switch
                v-model="writer_finished"
                style="padding: 7px 15px;float: right"
                active-text="完成"
                inactive-text="未完成"
                title="标记写作完成"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeWriterFinished"
              />
              <!--<el-button style="float: right;margin-right: 10px" type="success" v-if="post_id" @click="handleClickPublish" size="mini">推广</el-button>-->
              <el-link v-if="share_token !== ''" :href="'https://s.lianf.com/?s='+share_token" target="_blank" style="padding: 7px 15px;float: right">{{ share_token }}</el-link>
              <el-button v-else type="success" size="mini" style="padding: 7px 15px;float: right" @click="handleAddPostShare">添加分享</el-button>

            </el-col>
            <el-col v-if="is_manager" :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <el-switch
                v-model="owner_pass"
                style="padding: 7px 15px;float: right"
                active-text="通过"
                inactive-text="未通过"
                title="审核情况"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handleChangeOwnerPass"
              />
            </el-col>
          </el-row>

        </div>
        <hr>
        <div v-if="show_configs">
          <el-row :gutter="5">
            <!--        <el-col :xs="24" :sm="12" :md="12" :lg="3" :xl="3">-->
            <!--          <div class="grid-content bg-purple">-->
            <!--            <el-select v-model="project_id" placeholder="项目" size="mini" class="head"-->
            <!--                       clearable v-loading="projectsLoading" :disabled="!editable">-->
            <!--              <el-option-->
            <!--                v-for="item in projects"-->
            <!--                :key="item.id"-->
            <!--                :label="item.name"-->
            <!--                :value="item.id">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
            <!--          </div>-->
            <!--        </el-col>-->
            <el-col :xs="24" :sm="12" :md="12" :lg="3" :xl="3">
              <div class="grid-content bg-purple">
                <el-select
                  v-model="category_id"
                  v-loading="categoriesLoading"
                  placeholder="分类"
                  size="mini"
                  class="head"
                  clearable
                  :disabled="!editable"
                >
                  <el-option
                    v-for="category in categories"
                    :key="category.id"
                    :label="category.name"
                    :value="category.id"
                  />
                </el-select>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="3" :xl="3">
              <div class="grid-content bg-purple">
                <el-select
                  v-model="language_id"
                  v-loading="languagesLoading"
                  placeholder="语言"
                  size="mini"
                  class="head"
                  clearable
                  :disabled="!editable"
                >
                  <el-option
                    v-for="language in languages"
                    :key="language.id"
                    :label="language.name"
                    :value="language.id"
                  />
                </el-select>
              </div>
            </el-col>
            <!--<el-col :xs="24" :sm="12" :md="12" :lg="5" :xl="5">-->
            <!--<div class="grid-content bg-purple">-->
            <!--<el-select v-model="source_id" placeholder="翻译自系统中的文章?不是翻译则不填" filterable-->
            <!--size="mini" class="head" clearable v-loading="postsLoading" :disabled="!editable" style="width: 100%;">-->
            <!--<el-option-->
            <!--v-for="post in posts"-->
            <!--:key="post.id"-->
            <!--:label="post.id + ' | ' + post.title"-->
            <!--:value="post.id">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <!--</div>-->
            <!--</el-col>-->
            <el-col v-if="!is_out_writer()" :xs="24" :sm="12" :md="12" :lg="10" :xl="10">
              <el-select
                v-model="selected_webs"
                v-loading="websLoading"
                size="mini"
                placeholder="输出站点"
                :disabled="!editable"
                multiple
                clearable
                filterable
                style="width: 60%;"
              >
                <el-option
                  v-for="web in webs"
                  :key="web.id"
                  :label="web.url"
                  :value="web.id"
                />
              </el-select>
              <el-button
                type="warning"
                size="mini"
                title="管理站点"
                icon="el-icon-setting"
                @click="webVisible = true"
              />
              <el-button icon="el-icon-refresh" size="mini" title="刷新" type="info" @click="handleFetchWebs" />
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
            <el-row>
              <hr>
              <div class="mt-title" style="margin-top: 10px; margin-bottom: 3px">
                标题：
                <el-input
                  v-model="title"
                  placeholder="请输入内容"
                  :diabled="!editable"
                  size="small"
                  clearable
                />
                <!--<el-button icon="el-icon-refresh" title="不满意?重新生成标题模版" size="small" type="info"-->
                <!--@click="handleFetchTitleTemplates" v-if="editable" :loading="titleLoading"></el-button>-->
              </div>
            </el-row>
            <tinymce ref="mt" v-model.lazy="content" :height="460" @importcontentBGK="handleImportSuccess" />
            <el-row style="margin-top: 20px">
              <el-col :span="12">
                <el-tag>PL：{{ owner__username }}</el-tag><el-tag>写手:{{ writer_username }}</el-tag>
                <el-tooltip effect="dark" :content="auto_state_tips" placement="top">
                  <el-button
                    :type="optiomize_processed ? 'success': 'primary'"
                    size="mini"
                    :loading="insertImageloading"
                    @click="handleInsertImage"
                  >
                    {{ optiomize_processed ? '已经优化' : (auto_state_tips ? auto_state_tips : '优化内容') }}
                  </el-button>
                </el-tooltip>
                <el-button :type="insertlink_processed ? 'success': 'primary'" size="mini" :loading="insertlinkloading" @click="handleInsertLink">{{ insertlink_processed ? '已经插入': '插入内链' }}</el-button>
                <el-button :type="DuplicateCheck_processed ? 'success': 'primary'" size="mini" :loading="DuplicateCheck_loading" @click="handleDuplicateCheck">{{ DuplicateCheck_processed ? '已查' + duplicate_count + '处重复': '查重' }}</el-button>
                <el-tooltip v-if="last_post_data.account_id !== undefined && last_post_data.post_id !== post_id" class="item" effect="dark" :content="'account:' + last_post_data.domain + '目录:'+ last_post_data.categories.map( item=> { return item.name})" placement="top">
                  <el-button v-if="last_post_data.account_id !== undefined && last_post_data.post_id !== post_id" type="danger" size="mini" :loading="publishloading" @click="handlePublichPost">继续发布</el-button>
                </el-tooltip>
                <el-button v-if="publishloading" type="danger" size="mini" :loading="publishloading">发布中...</el-button>
                <el-link v-if="post_link !== ''" target="_blank" :href="post_link">打开【发布成功】</el-link>
              </el-col>
              <el-col :span="12">
                <el-dropdown
                  v-if="post_id && !is_out_writer()"
                  split-button
                  style="float: right;margin-right: 10px"
                  type="success"
                  size="mini"
                  @click="handleClickPublish"
                >
                  发布
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native.stop="handleThirdPublic">发布到第三方</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!--<el-button style="float: right;margin-right: 10px" name="submitbtn" type="primary" @click="handleClickSave('1')" size="mini"-->
                <!--:disabled="!saveDisabled">{{this.post_id?'更新':'保存'}}-->
                <!--</el-button>-->
                <el-dropdown
                  split-button
                  style="float: right;margin-right: 10px"
                  type="primary"
                  size="mini"
                  :disabled="!saveDisabled"
                  @click="handleClickSave('1')"
                >
                  保存
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native.stop="handleClickSave('2')">保存为版本</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>

            </el-row>

          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
            <postpublishrecord v-if="post_id" :post_id="post_id" />
            <div v-if="topic_id">
              <topicmaterial
                :topic_id="topic_id"
                topic_title="文章素材"
                :web-visible="materialVisible"
                @closeMetrialDialog="materialVisible=false"
              />
            </div>
            <!--        <span v-if="topic_description !== ''"><b>文章框架</b><hr></span>-->
            <!--        <div v-if="topic_description !== ''">-->
            <!--          <pre>{{topic_description}}</pre>-->
            <!--        </div>-->
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <web :web-visible="webVisible" @reload="handleFetchWebs" @closeWebDialog="webVisible=false" />
    <post-history
      :history-visible="historyVisible"
      :post_id="post_id"
      @applyHistory="applyHistory"
      @closeHistoryDialog="historyVisible=false"
    />
    <wppromote
      :promote-visiable="promoteVisiable"
      :project_id="project_id"
      :post_id="post_id"
      :tags="post_tags"
      :web="selected_webs ? selected_webs[0]: ''"
      @save="handleSaveSendPost"
      @closewppromoteDialog="promoteVisiable=false"
    />
  </div>
</template>

<script>
import { Get as GetProjects } from '@/api/erp/elicink/project'
import { Get as GetTitleTemplate } from '@/api/cms/titleTemplate'
import { Get as GetCategories } from '@/api/cms/category'
import { Get as GetLanguages } from '@/api/cms/language'
import { Get as GetPosts, Post as AddPost, Put as PutPost, duplicate_check, InsertInnerLink, InsertInnerImage, AddPostShare } from '@/api/cms/post'
import { Get as GetWebs } from '@/api/cms/web'
import Tinymce from '@/components/Tinymce'
import web from '@/views/cms/elements/web'
import postHistory from '@/views/cms/elements/postHistory'
import wppromote from '@/views/cms/elements/wppromote'
import { Post as SendPostRecord } from '@/api/cms/postpublish'
import { Post as PromotePost } from '@/api/cms/wppost'
import postpublishrecord from '@/views/cms/elements/postpublishrecord'
import Cookies from 'js-cookie'

import { has_permission } from '../../../assets/common'
import Topicmaterial from './topicmaterial'
export function getToken(key) {
  const v = Cookies.get(key)
  return v && parseInt(v) || null
}

export function setToken(key, value) {
  return Cookies.set(key, value, { expires: 30 })
}

// const ProjectKey = 'cms_project_id'
const CategoryKey = 'cms_category_id'
const LanguageKey = 'cms_language_id'

export default {
  name: 'PostEditor',
  components: { Topicmaterial, postHistory, Tinymce, web, wppromote, postpublishrecord },
  props: ['postEditorVisible', 'post_id', 'insert_end', 'insert_top'],
  data() {
    return {
      DuplicateCheck_processed: false,
      duplicate_count: 0,
      DuplicateCheck_loading: false,
      optiomize_processed: false,
      insertlink_processed: false,
      insertlinkloading: false,
      insertImageloading: false,
      dialogVisible: false,
      show_configs: true,
      myroles: [],
      writer_finished: false,
      is_manager: false,
      owner_pass: false,
      owner__username: '',
      writer_username: '',
      pageLoading: false,
      editable: true, // 是否有权限进行编辑
      projects: [],
      project_id: this.$store.getters.projectId,
      projectsLoading: false,
      topic_id: '',
      share_token: '',
      materialVisible: true,
      topic_description: '',
      categories: [],
      category_id: null,
      categoriesLoading: false,

      languages: [],
      language_id: null,
      languagesLoading: false,
      posts: [],
      source_id: null,
      postsLoading: false,

      webs: [],
      selected_webs: [],
      websLoading: false,
      last_post_data: {},
      post_link: '',
      publishloading: false,
      title: '',
      auto_state_tips: '',
      autoStateTimer: null, //  轮询定时器
      autoStatePollingInterval: 2000, // 轮询间隔(毫秒)
      content: '',
      saveDisabled: false,
      init_text: '',

      titleTemplates: [],
      titleLoading: false,

      subjectVisible: false,
      webVisible: false,

      historyVisible: false,
      promoteVisiable: false,
      post_tags: [],
      last_content: ''
    }
  },
  watch: {
    postEditorVisible(v) {
      this.dialogVisible = v
      if (v) {
        this.optiomize_processed = false
        this.insertlink_processed = false
        this.DuplicateCheck_processed = false
        this.duplicate_count = 0
        this.handleGetPost(this.insert_end, this.insert_top)
      }
    },
    content(v) {
      this.saveDisabled = v !== this.init_text && this.title
    },
    title(v) {
      this.saveDisabled = v !== this.init_text && this.title
    }
  },
  created() {
    // this.handleFetchProjects()
    this.handleFetchCategories()
    this.handleFetchLanguages()
    this.handleFetchWebs()
  },
  methods: {
    handlePublichPost() {
      this.last_post_data.post_id = this.post_id
      this.publishloading = true
      PromotePost(this.last_post_data)
        .then(response => {
          this.post_link = response.data.link
          this.last_post_data.domain = (new URL(this.post_link)).hostname
          this.publishloading = false
          this.notify('发布成功')
        })
        .catch(e => {
          this.publishloading = false
        })
    },
    handleAddPostShare() {
      AddPostShare(this.post_id, null).then(response => {
        this.share_token = response.share_token
        this.$message.success('插入成功')
      })
        .catch(e => {
          this.$message.error('获取失败')
        })
    },
    handleInsertImage() {
      // this.handleClickSave('1')
      this.insertImageloading = true
      InsertInnerImage({ post_id: this.post_id }).then(response => {
        this.last_content = response.html
        this.$refs.mt.setContent(response.html)
        this.$message.success('插入成功')
        this.optiomize_processed = true
        this.insertImageloading = false
        this.startAutoStatePolling() // 开始轮询状态
      })
        .catch(e => {
          this.$message.error('获取失败')
          this.insertImageloading = false
          this.startAutoStatePolling() // 开始轮询状态
        })
    },
    // 开始轮询状态
    startAutoStatePolling() {
      // 先清除可能存在的定时器
      if (this.autoStateTimer) {
        clearInterval(this.autoStateTimer)
      }

      // 立即执行一次
      this.getAutoStateTips()

      // 设置定时器定期查询状态
      this.autoStateTimer = setInterval(() => {
        this.getAutoStateTips()
      }, this.autoStatePollingInterval)
    },

    // 停止轮询
    stopAutoStatePolling() {
      if (this.autoStateTimer) {
        clearInterval(this.autoStateTimer)
        this.autoStateTimer = null
      }
    },

    // 获取优化状态
    getAutoStateTips() {
      GetPosts(this.post_id)
        .then(response => {
          this.auto_state_tips = response.data.auto_state_tips

          // 如果状态为finished，停止轮询并刷新内容
          if (this.auto_state_tips === 'finished' || this.auto_state_tips === 'error') {
            this.stopAutoStatePolling()
            this.refreshContent()
            this.optiomize_processed = true
            this.insertImageloading = false
            this.$message.success('内容优化完成')
          }
        })
        .catch(e => {
          console.error('获取状态失败:', e)
          this.stopAutoStatePolling()
          this.insertImageloading = false
        })
    },

    // 刷新内容
    refreshContent() {
      GetPosts(this.post_id)
        .then(response => {
          this.last_content = response.data.content
          this.$refs.mt.setContent(response.data.content)
        })
        .catch(e => {
          console.error('刷新内容失败:', e)
        })
    },

    // 组件销毁时清理定时器
    beforeDestroy() {
      this.stopAutoStatePolling()
    },
    handleDuplicateCheck() {
      // this.handleClickSave('1')
      this.DuplicateCheck_loading = true
      duplicate_check({ post_id: this.post_id }).then(response => {
        this.last_content = response.html
        this.$refs.mt.setContent(response.html)
        this.$message.success('处理成功,总共有' + response.count + '处重复')
        this.DuplicateCheck_processed = true
        this.DuplicateCheck_loading = false
        this.duplicate_count = response.count
      })
        .catch(e => {
          this.$message.error('获取失败')
          this.DuplicateCheck_loading = false
        })
    },
    handleInsertLink() {
      // this.handleClickSave('1')
      this.insertlinkloading = true
      InsertInnerLink({ post_id: this.post_id }).then(response => {
        this.last_content = response.html
        this.$refs.mt.setContent(response.html)
        this.$message.success('插入成功')
        this.insertlink_processed = true
        this.insertlinkloading = false
      })
        .catch(e => {
          this.$message.error('获取失败')
          this.insertlinkloading = false
        })
    },
    handleChangeOwnerPass() {
      PutPost(this.post_id, JSON.stringify({
        owner_pass: this.owner_pass,
        put_finished: 1
      }))
        .then(response => {
          this.$message.success('修改成功')
        })
        .catch(e => { })
    },
    changeShow(v) {
      console.log(v)
      this.show_configs = !this.show_configs
    },
    is_out_writer() {
      return has_permission()
    },
    handleFetchProjects() {
      this.projectsLoading = true
      GetProjects()
        .then(response => {
          this.projectsLoading = false
          this.projects = response.data.data
        })
        .catch(e => {
          this.projectsLoading = false
        })
    },
    handleFetchCategories() {
      this.categoriesLoading = true
      GetCategories()
        .then(response => {
          this.categoriesLoading = false
          this.categories = response.data.data
        })
        .catch(e => {
          this.categoriesLoading = false
        })
    },
    handleFetchLanguages() {
      this.languagesLoading = true
      GetLanguages()
        .then(response => {
          this.languagesLoading = false
          this.languages = response.data.data
        })
        .catch(e => {
          this.languagesLoading = false
        })
    },
    // handleFetchPosts() {
    //   this.postsLoading = true
    //   GetPosts()
    //     .then(response => {
    //       this.postsLoading = false
    //       this.posts = response.data.data
    //     })
    //     .catch(e => {
    //       this.postsLoading = false
    //     })
    // },
    close() {
      this.$emit('close', false)
    },
    handleFetchWebs() {
      this.websLoading = true
      GetWebs()
        .then(response => {
          this.websLoading = false
          this.webs = response.data.data
        })
        .catch(e => {
          this.websLoading = false
        })
    },
    querySearch(queryString, cb) {
      if (queryString) {
        cb(
          this.titleTemplates.map(m => {
            return { 'value': m.replace(/{}/g, queryString) }
          })
        )
      } else {
        cb([])
      }
    },
    handleClickPublish() {
      this.promoteVisiable = true
      console.log('tuiguang')
    },
    changeWriterFinished() {
      PutPost(this.post_id, JSON.stringify({
        put_finished: 1,
        writer_finished: this.writer_finished
      }))
        .then(response => {
          this.$message.success('修改成功')
          this.getList(false)
        })
        .catch(e => { })
    },
    handleThirdPublic() {
      this.$prompt('请输入发布的链接', '添加发布链接', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        SendPostRecord({
          post_id: this.post_id,
          url: value
        }).then(response => {
          // this.handleFetchTree()
          this.notify('保存成功')
        })
          .catch(() => {
            // this.treeLoading = false
          })
      }).catch(() => {
      })
    },
    handleClickSave(loading) {
      let version_name = ''
      if (loading === '1') {
        this.pageLoading = true
      } else if (loading === '2') {
        this.pageLoading = true
        version_name = prompt('版本名称:')
        if (!version_name) {
          version_name = ''
        }
      } else {
        this.pageLoading = true
        version_name = loading
        if (!version_name) {
          version_name = ''
        }
      }

      const vars = {
        project_id: this.project_id,
        category_id: this.category_id,
        language_id: this.language_id,
        source_id: this.source_id,
        webs: this.selected_webs,
        title: this.title,
        content: this.content,
        version_name: version_name,
        word_count: this.$refs.mt.getCount()
      }

      const x = this.post_id ? PutPost(this.post_id, JSON.stringify(vars)) : AddPost(JSON.stringify(vars))
      x.then(response => {
        this.last_content = this.content
        this.pageLoading = false
        if (response.data) this.post_id = response.data
        this.notify('保存成功')
        const promise = new Promise(function(resolve, reject) {
          resolve()
        })
        promise.then(this.setCookies())
      }).catch(e => {
        this.pageLoading = false
      })
      // this.$nextTick(() => {
      //   this.$refs.mt.insertContent('abc<img alt="Smiley face" height="42" width="42" src=""/>')
      // })
    },
    notify(message, duration) {
      this.$message.success(message)
    },
    handleGoogle(link) {
      window.open(link)
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    handleFetchTitleTemplates() {
      this.titleLoading = true
      GetTitleTemplate()
        .then(response => {
          this.titleTemplates = response.data
          this.titleLoading = false
        })
        .catch(e => {
          this.titleTemplates = []
          this.titleLoading = false
        })
    },
    checkAndSave() {
      if (this.content) {
        if (!this.title) this.title = (new Date()).toLocaleString()
        if (this.last_content !== this.content) this.handleClickSave()
      }
    },
    setCookies() {
      // if (this.project_id) setToken(ProjectKey, this.project_id)
      if (this.category_id) setToken(CategoryKey, this.category_id)
      if (this.language_id) setToken(LanguageKey, this.language_id)
    },
    handleOpenEditor() {
      const link = this.$router.resolve({ name: 'editPostPut', params: { post_id: this.post_id }})
      window.open(link.href, '_blank')
      this.dialogVisible = false
    },
    handleViewHistory() {
      this.historyVisible = true
    },
    handleImportSuccess(content) {
      this.title = content.title
    },
    handleSaveSendPost(post_data) {
      this.last_post_data = post_data
      if (this.last_post_data.post_link) {
        this.post_link = this.last_post_data.post_link
        this.last_post_data.domain = (new URL(this.post_link)).hostname
      }
    },
    applyHistory(data) {
      this.title = data.title
      this.$nextTick(() => {
        this.$refs.mt.setContent(data.content)
      })
      this.last_content = data.content
    },
    GetAuto_state_tips() {
      GetPosts(this.post_id)
        .then(response => {
          this.auto_state_tips = response.data.auto_state_tips
        })
    },
    handleGetPost(insert_end = null, insert_top = null) {
      if (this.post_id) {
        this.post_link = ''
        this.pageLoading = true
        GetPosts(this.post_id)
          .then(response => {
            this.pageLoading = false
            this.editable = response.data.editable
            this.project_id = response.data.project_id
            this.topic_description = response.data.topic_description
            this.topic_id = response.data.topic_id
            this.category_id = response.data.category_id
            this.post_tags = [response.data.keyword]
            this.language_id = response.data.language_id
            this.source_id = response.data.source_id
            this.writer_finished = response.data.writer_finished
            this.selected_webs = response.data.webs.map(m => m.id)
            this.owner_pass = response.data.owner_pass
            this.is_manager = response.data.is_manager
            this.owner__username = response.data.owner__username
            this.writer_username = response.data.writer_username
            this.share_token = response.data.share_token
            this.title = response.data.title
            this.$nextTick(() => {
              let html = response.data.content
              if (insert_top !== null) {
                html = insert_top + html
              }
              if (insert_end !== null) {
                html = html + insert_end
              }
              this.last_content = html
              this.$refs.mt.setContent(html)
            })
          })
      } else {
        this.pageLoading = false
        this.project_id = this.$store.getters.projectId
        // console.log(this.project_id, typeof this.project_id)

        this.category_id = getToken(CategoryKey)
        this.language_id = getToken(LanguageKey)
      }
    }
  }
}
</script>

<style scoped>
  .el-input--mini .el-input__inner {
    height: 28px;
    line-height: 28px;
    width: auto;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .head {
    width: auto;
  }

  .web {
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
  }

  .web >>> .el-input {
    min-width: 1200px;
  }

  .mt-detail:hover, .svg-icon:hover {
    cursor: pointer;
  }

  .mt-detail {
    color: #1976d2;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
    max-width: 1600px;
  }

  .clearfix ::after {
    content: "";
    clear: both
  }

  .mt-title {
    margin-bottom: 20px;
    display: inline-block;
    width: 100%
  }

  .mt-title >>> .el-autocomplete {
    width: calc(100% - 120px);
  }

  .mt-title >>> .el-input {
    width: calc(100% - 120px);
  }

</style>
